<template>
  <div>
    <!-- <div class="run_info">
      <div>运行统计</div>
    </div> -->
    <div id="chart">
      <Empty v-if="isEmpty" class="is_empty" :image="simpleImage" />
    </div>
    <div class="run_info">
      <div>每日运行详情</div>
      <div>
        <DatePicker
          style="width: 120px"
          v-model:value="selected"
          @change="onChange"
          picker="month"
          valueFormat="YYYY-MM"
        ></DatePicker>
      </div>
    </div>
    <div>
      <BoTable
        :columns="columns"
        :request="_request"
        ref="tableRef"
        :autoload="false"
        height="auto"
        hideSearch
      ></BoTable>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { computed, nextTick, ref } from 'vue';
import { BoTable, BoTableProps } from '@boeyo/ui';
import { DatePicker, Empty, Select, message } from 'ant-design-vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
import { run, runMonth } from '../api';

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const isEmpty = ref(false);
const props = defineProps({
  stationId: {
    type: String,
    default: '',
  },
});
const { stationId } = props;
const sysMonthOptions = ref([]);
const selected = ref();
const getInfo = async () => {
  try {
    const res: any = await run({ stationId });

    if (res.code !== 200 || !res.data.monthList || !res.data.monthList.length) {
      isEmpty.value = true;
      message.info('暂无运行数据!');
      return;
    }

    const data = res.data.monthList;
    sysMonthOptions.value = data.map((i) => {
      return {
        label: i.month,
        value: i.month,
      };
    });
    selected.value =
      sysMonthOptions.value[sysMonthOptions.value.length - 1]?.value;
    nextTick(() => {
      init(data);
      tableRef.value.refresh();
    });
  } catch (error) {
    isEmpty.value = true;
  }
};
getInfo();
const tableRef = ref();
let chart;
const onChange = (value) => {
  tableRef.value.refresh();
};
const init = (data: any) => {
  const xData = data.map((i) => i.month);
  const seriesData = data.map((i) => i.rate);
  if (chart) chart.dispose();
  const node = document.querySelector('#chart');
  chart = echarts.init(node);
  const option = {
    grid: {
      top: '10%',
      left: '5%',
      right: '5%',
      bottom: '15%',
    },
    color: ['#40A5FD'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: 'category',
      // boundaryGap: [0, 0.01],
      splitLine: {
        show: false,
      },
      triggerEvent: true,
      axisLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLabel: {
        interval: 0,
        color: '#FFF',
        // formatter: function (value) {
        //   if (value.length > 4) {
        //     // 假设超过4个字符就显示省略号
        //     return value.slice(0, 4) + '...'; // 显示前5个字符并添加省略号
        //   }
        //   return value;
        // },
      },

      data: xData,
    },
    yAxis: {
      name: '运行率',
      type: 'value',
      // min: 0,
      nameTextStyle: {
        color: '#fff',
      },
      axisLabel: {
        show: true,
        color: '#FFF',
        formatter: (value) => {
          return value + '%';
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        //show: false,
        lineStyle: {
          color: 'rgba(255,255,255,0.26)',
          type: 'dashed',
        },
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      {
        type: 'bar',
        data: seriesData,
        barWidth: 30,
        itemStyle: {
          // barBorderRadius: 7.5,
        },
        // label: {
        //   show: true,
        //   position: 'top',
        //   distance: 10,
        // },
      },
    ],
  };
  chart.setOption(option);
  addEventListener('resize', function () {
    chart.resize();
  });
};

const _request = async (params: any) => {
  return await runMonth({
    ...params,
    stationId,
    month: selected.value,
  });
};

const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '日期',
    dataIndex: 'day',
  },
  {
    title: '运行率',
    dataIndex: 'rate',
    customRender({ record }) {
      return <span>{record.rate + '%'}</span>;
    },
  },
  {
    title: '实际签到次数/应签到次数',
    dataIndex: 'name1',
    customRender({ record }) {
      return (
        <span>{record.actualSignInNum + '/' + record.shouldSignInNum}</span>
      );
    },
  },
  {
    title: '实际包数',
    dataIndex: 'packageNum',
  },
]);
</script>

<style lang="scss" scoped>
#chart {
  width: 100%;
  height: 30vh;
}
.run_info {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  & > div {
    font-weight: 700;
  }
}
</style>
